<template>
  <bangumi-player class="vp" v-if="hasDetail" :detail-data="detailData"></bangumi-player>
  <van-tabs 
    v-if="hasDetail" 
    class="tabs" 
    v-model:active="activeTab" 
    :title-active-color="themeColor"
    @change="handleTabChange"
  >
    <van-tab title="简介">
      <bangumi-info :detail-data="detailData"></bangumi-info>
      <bangumi-toolbar :detail-data="detailData"></bangumi-toolbar>
      <bangumi-episode :detail-data="detailData"></bangumi-episode>
      <bangumi-section :detail-data="detailData"></bangumi-section>
      <bangumi-related :detail-data="detailData"></bangumi-related>
    </van-tab>
    <van-tab>
      <template #title>评论 {{commentNum || ''}}</template>
      <bangumi-comment 
        :comments="videoComments"
      ></bangumi-comment>
    </van-tab>
  </van-tabs>

</template>

<script>
import { reactive, computed, inject, toRefs, watch } from 'vue'
import { Tabs as VanTabs, Tab as VanTab, Toast } from 'vant'
import BangumiPlayer from './player'
import BangumiInfo from './info'
import BangumiToolbar from './toolbar'
import BangumiEpisode from './episode'
import BangumiSection from './section'
import BangumiRelated from './related'
import BangumiComment from '@/components/Comment'
import { bangumiApi } from '@/api'
import { formatNumber } from '@/utils'
export default {
  name: 'Bangumi',
  components: {
    VanTabs,
    VanTab,
    BangumiPlayer,
    BangumiInfo,
    BangumiToolbar,
    BangumiEpisode,
    BangumiSection,
    BangumiRelated,
    BangumiComment
  },
  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  setup(props) {
    const params = reactive({
      detailData: null,
      hasDetail: computed(() => !!params.detailData),
      activeTab: 0,
      commentNum: 0,
      commentId: computed(() => params.detailData?.epInfo?.aid ?? -1),
      videoComments: []
    })

    const getData = async () => {
      try {
        const { data } = await bangumiApi.getDetail({
            id: props.id
        })
        if (data) {
          params.detailData = data
        }
      } catch (error) {
        Toast.fail(error.message)
      }
    }

    const getComments = async () => {
      try {
        if (params.commentId < 0) {
            return
        }
        const { data } = await bangumiApi.getComment({
            oid: params.commentId
        })
        if (data) {
          const { replies, page: { acount } } = data
          params.commentNum = formatNumber(acount)
          params.videoComments = replies                
        }
      } catch (error) {
        Toast.fail(error.message)
      }
    }

    const handleTabChange = (name) => {
      if (name === 1 && !params.videoComments.length) {
        // 评论标签首次加载
        getComments()
      }
    }

    watch(() => props.id, () => {
      getData()
    }, {
      immediate: true
    })

    return {
      ...toRefs(params),
      themeColor: inject('themeColor'),
      handleTabChange
    }
  }
}
</script>

<style lang="scss" scoped>
  @media screen and (orientation:portrait) {
    .vp{
      position: sticky;
      top: 44px;
      z-index: 2;
    }
    // 竖屏
    .tabs :deep .van-tabs__wrap {
      position: sticky;
      top: 255px;
      z-index: 2;
    }    
  }
</style>
